<template>
    <div class="classify" :style="{height: bodyHeight + 'px', width: bodyWidth + 'px'}"> 
        <s-search @search="search"></s-search>
        <div class="rootContent">
            <div class="rootList" ref="rootList" :style="{height: bodyHeight - 54 + 'px'}"> 
            <div>
                <div class="item" v-for="(item, index) in root" :key="item.id" :class="{cur: active === index}">
                    <span  @click.stop="selectMenu(index)">{{item.name}}</span>
                </div>
            </div>
        </div>
        
        <div class="classContent" :style="{height: bodyHeight - 54 + 'px', width: bodyWidth - 86 + 'px'}" ref="classContent">
            <div class="classList" >
                <div style="padding:10px 15px;"><!--Photoshop原有像素÷2=vue标注像素-->
                    <!-- <div style="height: 1px; overflow: hidden;"></div> -->
                    <!-- 相对应展示类目banner -->
                    <img v-if="advertPic != ''" :src="'/images'+advertPic" class="advPic" @click="$router.push('/goods/detail/'+advertLinkObjId)"/>
                    <!-- <img src="../../static/img/goodsTypeBanner.png" style="width:100%"/> -->
                    <div class="category" v-for="item in contentChild" :key="item.id">
                        <h4 class="title">
                            <img src="../../static/img/iconLine.png" style="width:20%; vertical-align:middle;"/>
                            {{item.name}}
                            <img src="../../static/img/iconLine.png" style="width:20%; vertical-align:middle;"/>
                        </h4>
                        <ul class="categoryChild">
                            <router-link  v-for="child in item.children" :key="child.id" :to="`/goods/list?code=${child.code}`">
                                <li>
                                    <img :src="`/images${child.pic}`" alt="">
                                    <span>{{child.name}}</span>
                                </li>
                            </router-link>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</template>

<script>
import BScroll from 'better-scroll';
import SSearch from './../../components//SSearch';
export default {
    name: 'classify',
    data() {
        return {
            active: 0,
            activeId: '',
            contentChild: [],
            root: [],
            advertPic: '', // 广告图片
            advertLinkObjId: '', // 广告图片链接id
            scrollRoot: null,
            scrolllContent: null,
            bodyHeight: localStorage.getItem('bodyHeight'),
            bodyWidth: document.documentElement.offsetWidth,
        }
    },

    methods: {
        search(searchVal) {
            this.$router.push('/goods/list?keyword=' + searchVal);
        },
        
        getTreeList() {
            this.$http.post('/shop/goodsCategory/front/getTreeListByShopId',{
                shopId: localStorage.getItem('shopId')
            }).then(res => {
                if (res.status === 0) {
                    console.log('获取产品分类（店铺）数据成功')
                    console.log(res)
                    this.root = res.data;
                    if (res.data.length > 0) {
                        this.advertPic = res.data[0].advertPic // 广告图片
                        this.advertLinkObjId = res.data[0].advertLinkObjId // 广告链接
                        this.contentChild = res.data[0].children;
                        this.activeId = res.data[0].id;
                    }
                    this.$nextTick(() => {
                        if (this.scrollRoot) {
                            this.scrollRoot.refresh();
                        }
                        if (this.scrolllContent) {
                            this.scrolllContent.refresh();
                        }
                    })
                } else {
                    this.$toast.fail(res.message)
                }
            })
        },
        selectMenu(index) {
            this.active = index;
            this.contentChild = this.root[index].children;
            this.advertPic = this.root[index].advertPic || ''; // 改变后的栏目广告图片
            this.advertLinkObjId = this.root[index].advertLinkObjId || ''; // 改变后的栏目广告图片链接
            let listHeight = this.bodyHeight - 54;
            let scrollTo = 46 * index;
            if (listHeight + scrollTo > ((this.root.length + 1) * 46)) {
                return;
            }
            this.scrollRoot.scrollTo(0, 0 - scrollTo, 500);
            this.$nextTick(() => {
                if (this.scrolllContent) {
                    this.scrolllContent.refresh();
                }
            })
        }
    },

    beforeDestroy() {
        if (this.scrollRoot) {
            this.scrollRoot.destroy();
        }
        if (this.scrolllContent) {
            this.scrolllContent.destroy();
        }
    },
    components: { SSearch },
    mounted() {
        this.getTreeList();
        this.$nextTick(() => {
            this.scrollRoot = new BScroll(this.$refs.rootList, {tap: true, click: true});
            this.scrolllContent = new BScroll(this.$refs.classContent, {tap: true, click: true});
        })
    }
}
</script>

<style lang="less" scoped>
.classify {
    height: 100%;
}
.rootContent{border-top: 1px solid #d9d9d9;}
.rootList {
    float: left;
    min-width: 76px;
    width: 76px;
    height: auto;
    overflow: hidden;
    min-height: 100%;
    width: 86px;
    position: relative;
    background: #fff;
    border-right: 1px solid #d9d9d9;
    .item {
        height: 46px;
        line-height: 46px;
        text-align: center;
        position: relative;
        color: #333;
        font-size: 14px;
        &.cur {
            // background-color: #fff;
            color: #ff6700;
            border-left: 5px solid #ff6700;
        }
    }
}

.classContent {
    height: 100%;
    min-height: 100%;
    width: 100%;
    font-size: 12px;
    color: #252525;
    background-color: #fff;
    margin-left: 86px;
    overflow: hidden;
    position: relative;
    .classList {
        -webkit-overflow-scrolling: touch;
        .advPic{width: 100%; min-width:250px; min-height: 80px;}
        .category {
            margin: 19px 0px 0;
            .title {
                font-size: 14px;
                color: #333;
                margin: 0;
                padding: 0;
                line-height: 1em;
                font-weight: 700;
                width:100%;
                text-align: center;
            }

            .categoryChild {
                border: 0;
                font-size: 0;
                // padding: 7px 10px 0;
                overflow: hidden;
                margin-top: 9px;
                background-color: #fff;

                li {
                    width: 32.8%;
                    float: left;
                    text-align: center;
                    display: block;
                    margin: 0;
                    padding: 0;
                    list-style-type: none;
                    img {
                        min-width: 70px;
                        min-height: 70px;
                        width: 70px;
                        height: 70px;
                    }
                    span {
                        color: #333;
                        height: 35px;
                        margin-top: 2px;
                        -webkit-box-pack: start;
                        font-size: 12px;
                        height: 36px;
                        color: #686868;
                        width: 100%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: box;
                        display: -webkit-box;
                        display: -moz-box;
                        display: -ms-box;
                        display: -o-box;
                        line-clamp: 2;
                        -webkit-line-clamp: 2;
                        -moz-line-clamp: 2;
                        -ms-line-clamp: 2;
                        -o-line-clamp: 2;
                        box-orient: vertical;
                        -webkit-box-orient: vertical;
                        -ms-box-orient: vertical;
                        -o-box-orient: vertical;
                        word-break: break-all;
                        box-align: center;
                        -webkit-box-align: center;
                        -moz-box-align: center;
                        -ms-box-align: center;
                        -o-box-align: center;
                        box-pack: center;
                        -webkit-box-pack: center;
                        -moz-box-pack: center;
                        -ms-box-pack: center;
                        -o-box-pack: center;
                        z-index: 2;
                        position: relative;
                    }
                }
            }
        }
    }
}
</style>
